<template>
	<!-- 顶部标题和产品类按钮 -->
	<div class="theTop">
		<div class="title">主要农产品分布情况</div>
		<div class="top-buttons">
			<div class="button" @click="onClickButton(1)">
				<img src="@/assets/img/map/category1.png" />
				<div>香榧</div>
			</div>
			<div class="button" @click="onClickButton(2)">
				<img src="@/assets/img/map/category2.png" />
				<div>笋竹</div>
			</div>
			<div class="button" @click="onClickButton(3)">
				<img src="@/assets/img/map/category3.png" />
				<div>山黄精</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'CenterMapTop',
	data() {
		return {};
	},

	methods: {
		onClickButton(categoryId) {
			this.$store.dispatch('settings/setCurCategoryId', categoryId);
			this.$router.push('/category');
		}
	}
};
</script>
<style lang="scss" scoped>
.theTop {
	width: 100%;
	height: 218px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;

	.title {
		height: 36px;
		font-size: 36px;
		font-weight: 500;
		line-height: 60px;
		color: #e0e0e0;
	}
	.top-buttons {
		padding: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		gap: 60px;
		.button {
			cursor: pointer;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 174px;
			height: 64px;
			background-image: url('~@/assets/img/button.png');
			font-size: 30px;
			line-height: 64px;
			color: #848e92;
			text-align: center;
			img {
				height: 32px;
				padding-right: 10px;
			}
		}
	}
}
</style>
